//轮播图切换算法
//【注意：轮播图增加了虚拟尾节点！虚拟尾节点的图片与第一张图片相同】
(function () {
    //轮播图数据
    const data = [{
        title: '绝境之下！华丽地反击！',
        img_url: '/public/carousel_cover0.webp',
        carousel_bottom_backgroundColor: 'rgb(115, 58, 74)',
        video_url: 'https://www.bilibili.com/',
    }, {
        title: '一键领取星穹铁道首款个性装扮啦！',
        img_url: '/public/carousel_cover1.webp',
        carousel_bottom_backgroundColor: 'rgb(50, 57, 85)',
        video_url: 'https://www.bilibili.com/',
    }, {
        title: '什么，ta竟然在背着你做攻略？！',
        img_url: '/public/carousel_cover2.webp',
        carousel_bottom_backgroundColor: 'rgb(147, 88, 155)',
        video_url: 'https://www.bilibili.com/',
    }, {
        title: '致敬！中国缉毒警察跨国缉拿金三角毒贩',
        img_url: '/public/carousel_cover3.webp',
        carousel_bottom_backgroundColor: 'rgb(40, 45, 35)',
        video_url: 'https://www.bilibili.com/',
    }, {
        title: '是老师也是UP主！来投稿你的课堂实录~',
        img_url: '/public/carousel_cover4.webp',
        carousel_bottom_backgroundColor: 'rgb(38, 33, 27)',
        video_url: 'https://www.bilibili.com/',
    }, {
        title: '原神3.7版本图文攻略征集大赛',
        img_url: '/public/carousel_cover5.webp',
        carousel_bottom_backgroundColor: 'rgb(76, 150, 206)',
        video_url: 'https://www.bilibili.com/',
    }]

    const carousel_item_num = data.length
    let carousel = document.querySelector('.carousel')
    let carousel_bottom = document.querySelector('.carousel_bottom')
    let carousel_bottom_title = document.querySelector('.carousel_bottom_title')
    let carousel_bottom_dots = document.querySelector('.carousel_bottom_dots')
    let carousel_btns = document.querySelectorAll('.carousel_bottom_btn')
    let carousel_index = 0

    //初始化轮播图的一些样式
    Object.assign(carousel.style, {
        width: (carousel_item_num + 1) * 100 + '%',
    })
    carousel_bottom.style.setProperty('--carouselBottomColor', data[carousel_index].carousel_bottom_backgroundColor)
    carousel_bottom_title.innerText = data[0].title

    //构建轮播图html节点
    let carousel_item_html = ''
    data.forEach(item => {
        carousel_item_html += `
        <a href="${item.video_url}">
            <img class="carousel_item" src="${item.img_url}">
        </a>
        `
    })
    //增加轮播图虚拟尾节点
    carousel_item_html += `
    <a href="${data[0].video_url}">
        <img class="carousel_item" src="${data[0].img_url}">
    </a>
    `
    carousel.innerHTML = carousel_item_html

    //构建轮播图底部【点点】html节点
    let carousel_bottom_dots_html = '<div class="carousel_bottom_dot carousel_dot_active"></div>'
    for (let i = 0; i < carousel_item_num - 1; i++) {
        carousel_bottom_dots_html += `
        <div class="carousel_bottom_dot"></div>
        `
    }
    carousel_bottom_dots.innerHTML = carousel_bottom_dots_html


    let carousel_dots = document.querySelectorAll('.carousel_bottom_dot')


    //切换图片后的标题、点点、底部颜色变化函数
    function changeCarouselBottom(carousel_index) {
        //点点样式变化
        carousel_dots.forEach(item => {
            item.classList.remove('carousel_dot_active')
        })
        carousel_dots[carousel_index].classList.add('carousel_dot_active')
        //设置底部背景颜色、阴影颜色
        carousel_bottom.style.setProperty('--carouselBottomColor', data[carousel_index].carousel_bottom_backgroundColor)
        //设置底部标题
        carousel_bottom_title.innerHTML = data[carousel_index].title
    }

    //点击按钮切换图片
    carousel_btns.forEach((btn, index) => {
        btn.addEventListener('click', () => {
            //情况一：当前显示的是第一张图片，且点击了左按钮
            if (carousel_index == 0 && index == 0) {
                carousel_index = carousel_item_num - 1
                //1.先瞬移到虚拟尾节点
                carousel.style.transition = 'none'
                carousel.style.transform = `translateX(-${carousel_item_num / (carousel_item_num + 1) * 100}%)`
                //2.再从虚拟尾节点切到最后一张图片
                setTimeout(() => {
                    carousel.style.transition = 'all 0.3s'
                    carousel.style.transform = `translateX(-${carousel_index / (carousel_item_num + 1) * 100}%)`
                }, 0)
            }
            //情况二：当前显示的是最后一张图片，且点击了右按钮
            else if (carousel_index == carousel_item_num - 1 && index == 1) {
                carousel_index = 0
                //1.先从最后一张图片切到虚拟尾节点
                carousel.style.transition = 'all 0.3s'
                carousel.style.transform = `translateX(-${carousel_item_num / (carousel_item_num + 1) * 100}%)`
                //2.再从虚拟尾节点瞬移到第一张图片
                setTimeout(() => {
                    carousel.style.transition = 'none'
                    carousel.style.transform = `translateX(0)`
                }, 300)

            }
            /*  情况三：
                    当前显示的不是第一张或最后一张图片 || 
                    当前显示的是第一张图片，且点击了右按钮 || 
                    当前显示的是最后一张图片，且点击了左按钮
            */
            else {
                carousel_index = index == 0 ? carousel_index - 1 : carousel_index + 1
                //切换图片
                carousel.style.transition = 'all 0.3s'
                carousel.style.transform = `translateX(-${carousel_index / (carousel_item_num + 1) * 100}%)`
            }
            changeCarouselBottom(carousel_index)
        })
    })

    //点击点点切换图片
    carousel_dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            carousel_index = index
            //切换图片
            carousel.style.transition = 'none'
            carousel.style.transform = `translateX(-${carousel_index / (carousel_item_num + 1) * 100}%)`
            changeCarouselBottom(carousel_index)
        })
    })

    //自动轮播
    let timer = setInterval(() => {
        carousel_btns[1].click()
    }, 3000)

})()

